<template>
  <div class="rabbit-head-info">


    <!-- 养殖信息 -->
    <div class="breeding-info">
      <h3 class="section-title">养殖信息</h3>
      <el-table :data="breedingTableData" border class="info-table">
        <el-table-column prop="variety" label="品种" />
        <el-table-column prop="source" label="来源" />
        <el-table-column prop="feedingDays" label="饲养天数" />
        <el-table-column prop="feedBrand" label="饲料品牌" />
        <el-table-column prop="feedingResponsible" label="饲养负责人" />
        <el-table-column prop="slaughterDate" label="出栏日期" />
      </el-table>
      <el-divider class="divider" />
    </div>

    <!-- 保健信息 -->
    <div class="healthcare-info">
      <h3 class="section-title">保健信息</h3>
      <el-table :data="healthcareList" border class="info-table">
        <el-table-column prop="feedingDays" label="饲养天数" />
        <el-table-column prop="healthcareMethod" label="保健方式" />
        <el-table-column prop="healthcareApproach" label="保健方法" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" type="primary" @click="editHealthcare(scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="deleteHealthcare(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="addHealthcareRow" class="add-button">新增行</el-button>
      <el-divider class="divider" />
    </div>

    <!-- 动检证 -->
    <div class="animal-inspection">
      <h3 class="section-title">动检证</h3>
      <el-upload
        action="#"
        :show-file-list="false"
        :before-upload="beforeUpload"
      >
        <el-button type="primary">上传动检证</el-button>
      </el-upload>
      <el-divider class="divider" />
    </div>

    <!-- 企业信息 -->
    <div class="enterprise-info">
      <h3 class="section-title">企业信息</h3>
      <el-table :data="enterpriseTableData" border class="info-table">
        <el-table-column prop="farm" label="养殖场" />
        <el-table-column prop="responsiblePerson" label="负责人" />
        <el-table-column prop="stockQuantity" label="存栏数量" />
      </el-table>
      <h3 class="section-title">企业照片</h3>
      <el-upload
        action="#"
        :multiple="true"
        :show-file-list="true"
        :before-upload="beforeUpload"
      >
        <el-button type="primary">上传照片</el-button>
      </el-upload>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';


// 养殖信息表格数据
const breedingTableData = ref([
  {
    variety: '伊拉兔',
    source: '采购',
    feedingDays: '90',
    feedBrand: '大生兔',
    feedingResponsible: '小陈',
    slaughterDate: '2021 - 10 - 18'
  }
]);

// 保健信息列表
const healthcareList = ref([
  {
    feedingDays: '35',
    healthcareMethod: '兔瘟单苗',
    healthcareApproach: '皮下注射'
  },
  {
    feedingDays: '40',
    healthcareMethod: '巴二联苗',
    healthcareApproach: '皮下注射'
  }
]);

// 新增保健信息行
const addHealthcareRow = () => {
  healthcareList.value.push({
    feedingDays: '',
    healthcareMethod: '',
    healthcareApproach: ''
  });
};

// 编辑保健信息
const editHealthcare = (row: any) => {
  ElMessage.info('编辑保健信息功能暂未实现');
};

// 删除保健信息
const deleteHealthcare = (row: any) => {
  const index = healthcareList.value.indexOf(row);
  if (index > -1) {
    healthcareList.value.splice(index, 1);
  }
  ElMessage.success('删除成功');
};

// 企业信息表格数据
const enterpriseTableData = ref([
  {
    farm: '四川镇林养殖基地',
    responsiblePerson: '文总',
    stockQuantity: 3200
  }
]);

// 上传文件前的处理
const beforeUpload = (file: any) => {
  ElMessage.info('上传功能暂未实现');
  return false;
};
</script>

<style scoped>
.rabbit-head-info {
  padding: 20px;
  height: 500px;
  overflow-y: auto;
  font-family: Arial, sans-serif;
}

.product-info {
  margin-bottom: 20px;
  position: relative;
}

.product-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.product-name {
  font-size: 20px;
  margin-bottom: 10px;
}

.product-detail {
  margin-bottom: 5px;
}

.product-actions {
  position: absolute;
  top: 20px;
  right: 20px;
}

.section-title {
  font-size: 18px;
  margin-bottom: 10px;
}

.divider {
  margin-top: 10px;
  margin-bottom: 10px;
}

.info-table {
  width: 100%;
  margin-bottom: 10px;
}

.add-button {
  margin-top: 10px;
}
</style>